{% extends "base.html" %}
{% block content %}
<h2 class="mb-4">قائمة الطعاممم</h2>
<div class="row">
    {% for product in products %}
    <div class="col-md-4 mb-4">
        <div class="card">
            <img src="{{ url_for('static', filename='images/' + product.image) }}" class="card-img-top" alt="{{ product.name }}">
            
            <div class="card-body">
                <h5 class="card-title">{{ product.name }}</h5>
                <p class="card-text">{{ product.description }}</p>
                <p class="text-success">{{ product.price }} د.ل</p>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#orderModal{{ product.id }}">
                    اطلب الآن
                </button>
            </div>
            
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="orderModal{{ product.id }}" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="POST" action="/place_order">
                    <div class="modal-header">
                        <h5 class="modal-title">طلب {{ product.name }}</h5>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>اسمك</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label>رقم الهاتف</label>
                            <input type="text" name="phone" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label>الكمية</label>
                            <input type="number" name="item_{{ product.id }}" class="form-control" value="1" min="1">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary">تأكيد الطلب</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}